React Development Basic -- 组件开发基础

// 组件的首字母必须为大写
function App() {
    return <div> Hello World!!! </div>
}

ReactDOM.render(<App />, document.getElementById("root"))

const jsx = (
  <>
    <App />
    <App />
  </>
)
ReactDOM.render(jsx, document.getElementById("root"))

<ChildProps msg="first" />
<ChildProps msg="second" />

function ChildProps (props) {
    return <p> {props.msg} </p>
}

function ChildProps ({ msg }) {
    return <p> { msg } </p>
}

ChildProps.defaultProps = {
    msg: "Hello React"
}

<ChildProps msg="first" /> // first
<ChildProps /> // Hello React

function Person (props) {
  return <div>{props.info.name}</div>
}

<Person /> // 报错, 因为组件内部代码执行时, 通过 props 获取到的 info 为 undefined, 不能再通过 undefined 获取 name
<Person info={{name: "张三"}}/> // 张三

Person.defaultProps = {
  info: {}
}

<Person /> // 不会报错, 因为在 JSX 中渲染 undefined 是合法的
<Person info={{name: "张三"}}/> // 张三

<Person> Hello, React Children Property </Person>

<Person> 
	<p> single child </p>
</Person>

<Person> 
	<p> single child </p>
    <p> single child </p>
    <p> single child </p>
</Person>

function Person(props) {
    return <div> { props.children } </div>
}

function HomePage() {
  return <div>HomePage</div>;
}
function AboutPage() {
  return <div>AboutPage</div>;
}

function Header() {
  return <div>Header</div>;
}
function Footer() {
  return <div>Footer</div>;
}

function Layout(props) {
  return (
    <>
    <Header />
    <div>{props.children}</div>
    <Footer />
    </>
  );
}

function HomePage() {
  return <Layout>HomePage</Layout>;
}
function AboutPage() {
  return <Layout>AboutPage</Layout>;
}

function App() {
    const handleClickButton = () => {
        console.log("Hello React!")
    }
    return <button onClick={handleClickButton}> button </button>
}

function App() {
    const handleClick = (str1, str2) => {
        console.log(str1, str2);
    };
    return <button onClick={() => handleClickButton("Hello", "React")}> button </button>
}

function OnMessage() {
  	return <span>The Machine is On</span>
}
function OffMessage() {
  	return <span>The Machine is Off</span>
}
function OnOff() {
  	if (true) {
    	return <OnMessage />
  	} else {
    	return <OffMessage />
  	}
}

function Message() {
    const getMessage() {
        if(true) {
            return <OnMessage />
        }else {
            return <OffMessage />
        }
    }
    return {getMessage()}
}

function Machine() {
  	let message = null
  	if (true) {
    	message = <OnMessage />
  	} else {
    	message = <OffMessage />
  	}
  	return <p>{message}</p>
}

function Message() {
    return <p> {true ? <OnMessage /> : <OffMessage />} </p>
}

const isError = true
function Message() {
    <div className={isError ? "error" : "success"}>
    	{isError ? <p>Something went wrong...</p> : <p>Everythis is ok</p>}
    </div>
}

function Home() {
  const data = ["The beach", "The mountains", "Vibrant cities", "Roughing it"];
  return (
    <>
      <div>{data}</div>
    </>
  );
}

function Home() {
  const jsxList = [
    <li>list-item-1</li>,
    <li>list-item-2</li>,
    <li>list-item-3</li>,
  ];
  return (
    <>
      <ul>{jsxList}</ul>
    </>
  );
}

const data = [
  { name: "The beach" },
  { name: "The mountains" },
  { name: "Vibrant cities" },
  { name: "Roughing it" }
]

const arr = [1, 2, 3, 4, 5, 6];
const newArr = arr.map((item, index) => item * index);
console.log(newArr); // [0, 2, 6, 12, 20, 30]

function Home() {
  let data = ["Data1", "Data2", "Data3"];

  return (
    <>
      <ul>
        {data.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </>
  );
}

const [state, setState] = useState(initialState)

import React,{useState} from "react";
function Example() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}
export default Example;

function App() {
  const [count, setCount] = React.useState(0);
  let number = 0;
  console.log("rerender", number);
  return (
    <>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button
        onClick={() => {
          number = number + 1;
          console.log("onClick", number);
        }}
        >
        {number}
      </button>
    </>
  );
}

const Hook =()=>{
    console.log('Hook render...')
    const [count, setCount] = useState(0)
    const [name, setName] = useState('rose')

    return(
        <div>
            <div>
                {count}
            </div>
            <button onClick={()=>setCount(count+1)}>update count </button>
            <button onClick={()=>setName('jack')}>update name </button>
            <Child data={name}/>
        </div>
    )
}

const Child = memo(({data}) =>{
    console.log('child render...', data)
    const [name, setName] = useState(data)
    return (
        <div>
            <div>child</div>
            <div>{name} --- {data}</div>
        </div>
    );
})

useEffect(fn, array)

function Father() {
    const [message, setMessage] = useState("Hello");
    // 调用子组件并传递数据
    return <Child msg={message} />
}

function Child(props) {
    // 接收来自父组件的 msg 状态数据
    return <div> {props.msg} </div>
}

function Child({ msg }) {
    // 接收来自父组件的 msg 状态数据
    return <div> {msg} </div>
}

function Father() {
    const [message, setMessage] = useState("Hello");
    // 调用子组件并传递数据
    return <Child msg={message} setMsg={setMessage} />
}

function Child(props) {
    // 接收来自父组件的 msg 状态数据
    return (
    	<>
        	<div> {props.msg} </div>
        	<button onClick={()=> props.setMsg("React")}>button</button>
        </>
    )
}

function Child({ msg, setMsg }) {
    // 接收来自父组件的 msg 状态数据
    return (
    	<>
        	<div> {msg} </div>
        	<button onClick={()=> setMsg("React")}>button</button>
        </>
    )
}

function Father() {
    const [person, setPerson] = React.useState({ name: "张三" });
    return (
    	<>
        	<ChildFirst person={person} />
        	<ChildSecond person={person} />
        </>
    )
}

function ChildFirst({person}) {
    return <div> {person.name} </div>
}

function ChildSecond({person}) {
    return <div> {person.name} </div>
}

function App() {
  const values = { sayHello: "Hello", sayHi: "hi" };
  return <Message sayHello={values.sayHello} sayHi={values.sayHi} />;
}

function App() {
  const values = { sayHello: "Hello", sayHi: "hi" };
  return <Message {...values} />;
}

function App() {
  const values = { sayHello: "Hello", sayHi: "hi" };
  return <Message {...values} />;
}

function Message(props) {
  return <Button {...props} />;
}

function Button(props) {
  return <pre>{JSON.stringify(props, null, 2)}</pre>;
}

// Application: 应用页面级组件
function Application() {
  const userName = "John Smith";
  return <Layout userName={userName}>Main content</Layout>;
}
// Layout: 应用布局组件
function Layout({ children, userName }) {
  return (
    <div>
      <Header userName={userName} />
      <main>{children}</main>
    </div>
  );
}
// Header 头部组件
function Header({ userName }) {
  return (
    <header>
      <UserInfo userName={userName} />
    </header>
  );
}
// UserInfo: 用户信息组件
function UserInfo({ userName }) {
  return <span>{userName}</span>;
}
// 渲染应用级页面组件 Application
ReactDOM.render(<Application />, document.getElementById("root"));

const value = useContext(MyContext);

// 创建 Context 对象
// createContext 方法的参数就是默认的状态值
const Context = React.createContext("Default Value");

function App() {
  // 组件通过 useContext 方法获取 Context 提供的默认状态
  const value = React.useContext(Context);
  return <div>{value}</div>;
}

// 创建 Context 对象存储默认状态值
const Context = React.createContext("Default Value");

function App() {
  const value = "My Context Value";
  // 通过 Context.Provider 组件提供状态, 该状态值会覆盖默认状态值
  return (
    <Context.Provider value={value}>
      <MyComponent />
    </Context.Provider>
  );
}

function MyComponent() {
  // 下层组件获取 Context 全局状态值
  const value = React.useContext(Context);
  return <div>{value}</div>;
}

function App() {
  const [username, setUsername] = React.useState("");
  const handleChange = (event) ={
      setUsername(event.target.value)
  }
  return (
    <input
      type="text"
      value={username}
      onChange={handleChange}
    />
  );
}

function App() {
    const [formState, setFormState] = useState({
        usename: "",
        password: "",
    })
    const handleChangeUsername = (event) => {
        setFormState({
            ...formState,
            username: event.target.value
        })
    }
    const handleChangePasswrod = (event) => {
        setFormState({
            ...formState,
            password: event.target.value
        })
    }
    
    return (
    	<>
        	<input 
                type="text" 
                value={formState.username}
                onChange={handleChangeUsername}
               />
        	<input 
                type="password" 
                value={formState.password}
                onChange={handleChangePasswrod}
               />
        </>
    )
}

function App() {
    const [formState, setFormState] = useState({
        usename: "",
        password: "",
    })
    const handleChangeFormState = (event) => {
        setFormState({
            ...formState,
            [event.target.name]: event.target.value
        })
    }
    
    return (
    	<>
        	<input 
                type="text" 
                name="username"
                value={formState.username}
                onChange={handleChangeFormState}
               />
        	<input 
                type="password" 
                name="password"
                value={formState.password}
                onChange={handleChangeFormState}
               />
        </>
    )
}

function App() {
  const [formState, setFormState] = React.useState({
    textarea: "",
  });
  const handleChangeFormState = (event) => {
    setFormState({
      ...formState,
      [event.target.name]: event.target.value,
    });
  };
  return <textarea name="textarea" value={formState.textarea} onChange={onChangeHandler}></textarea>;
}

function App() {
  const [formState, setFormState] = React.useState({
    select: "",
  });
  const handleChangeFormState = (event) => {
    setFormState({
      ...formState,
      [event.target.name]: event.target.value,
    });
  };
  return (
    <select
      name="select"
      value={formState.select}
      onChange={handleChangeFormState}
      >
      {/* 默认值 */}
      <option value="">请选择交通方式</option>
      <option value="0">火车</option>
      <option value="1">飞机</option>
    </select>
  );
}

function App() {
  const [formState, setFormState] = React.useState({
    radio: "",
  });
  const handleChangeFormState = (event) => {
    setFormState({
      ...formState,
      [event.target.name]: event.target.value,
    });
  };
  return (
    <>
    	<input type="radio" name="radio" value="m"  onChange={handleChangeFormState} />
    	<span>M</span>
    	<input type="radio" name="radio" value="s" onChange={handleChangeFormState} />
    	<span>S</span>
		</>
	);
}

function App() {
  const [formState, setFormState] = React.useState({
    username: "",
  });
  const handleChangeFormState = (event) => {
    setFormState({
      ...formState,
      [event.target.name]: event.target.value,
    });
  };
  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(formState);
  };
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="username"
        value={formState.username}
        onChange={handleChangeFormState}
        />
      <input type="submit" />
    </form>
  );
}

const initialState = {
  username: "",
};
function App() {
  const [formState, setFormState] = React.useState(initialState);
  const handleChangeFormState = (event) => {
    setFormState({
      ...formState,
      [event.target.name]: event.target.value,
    });
  };
  const onResetHandler = (event) => {
    setFormState(initialState);
  };
  return (
    <form>
      <input
        type="text"
        name="username"
        value={formState.username}
        onChange={handleChangeFormState}
        />
      <button type="button" onClick={onResetHandler}>
        重置
      </button>
    </form>
  );
}

import { useRef } from 'react';

function App () {
  const username = useRef();
  const handler = () => console.log(username); // {current: input}
  return <input ref={username} onChange={handler}/>
}

import { useEffect, useRef } from "react";
import Message from "./Message";

function App() {
  const messageRef = useRef();
  useEffect(() => {
    console.log(messageRef.current);
  }, []);
  return <Message ref={messageRef} />;
}

export default App;

import { forwardRef } from "react";

function Message(props, ref) {
  return <span ref={ref}>I am span</span>;
}
export default forwardRef(Message);

function App() {
  const usernameRef = React.useRef();
  const onSubmitHandler = (event) => {
    event.preventDefault();
    console.log(usernameRef.current.value);
  };
  return (
    <form onSubmit={onSubmitHandler}>
      <input type="text" ref={usernameRef} />
      <input type="submit" />
    </form>
  );
}

function App() {
  return <button class="button">button</button>;
}

import { useState } from "react";

function App() {
  const [state, setState] = useState({
    colors: ["palevioletred", "yellow", "papayawhip"],
    index: 0,
  });
  const styles = {
    width: 200,
    padding: "50px 0",
    background: state.colors[state.index],
    textAlign: "center",
  };
  const onClickHandler = () => {
    setState({
      ...state,
      index: state.index + 1 > state.colors.length - 1 ? 0 : state.index + 1,
    });
  };
  return (
    <div style={styles} onClick={onClickHandler}>
      Hello React
    </div>
  );
}

export default App;

// App.js
import styles from "./App.module.css";

function App() {
  return <button className={styles.button}>button</button>;
}

import { useState } from "react";
import Modal from "./Modal";

function App() {
  const [isOpen, setIsOpen] = useState(false);
  const appStyles = { width: "60%", height: 400, transform: "translate(0,0)" };
  return (
    <div style={appStyles}>
      <button onClick={() => setIsOpen(!isOpen)}>open modal</button>
      {isOpen ? <Modal /> : null}
    </div>
  );
}

export default App;

import styles from "./Modal.module.css";

function Modal() {
  return (
    <div className={styles.overlayer}>
      <div className={styles.content}></div>
    </div>
  );
}
export default Modal;

import styles from "./Modal.module.css";
import ReactDOM from "react-dom";

function Modal() {
  return ReactDOM.createPortal(
    <div className={styles.overlayer}>
      <div className={styles.content}></div>
    </div>,
    document.getElementById("portal-root")
  );
}
export default Modal;